<template>
    <div id="menu">
        <div class="amenu">
            <div class="amenu_site_logo" @click="gohome"><i class="el-icon-basketball"></i> ATOM管理中心</div>
            <!-- :class="{'amsm_item_ul_li_active':m.active==1}"  -->
            <div class="amenu_site_menu" v-for="(m,index) in menus" @mouseenter="open(m)">
                <i :class="m.icon"></i> {{m.name}}</div>
        </div>

        <div class="loginInfo">
            <div class="loginUserInfo">
                <div>系统管理员</div>
                <div>
                    <i class="el-icon-chat-line-round" title="站内消息"></i>
                    <i class="el-icon-user" title="个人信息"></i>
                    <i class="el-icon-setting" title="设置"></i>
                    <i class="el-icon-close" title="退出"></i>
                </div>
            </div>
            <el-image class="loginUser" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" ></el-image>
        </div>


        <div ref="fx_down" class="amenu_site_menu_down" :tabIndex='2' v-show="isopen" @blur="close">

            <div class="amsm_item" v-for="(sm,index) in subMenu">
                <div class="amsm_item_title">{{sm.name}}</div>
                <div class="amsm_im_ul">
                    <el-scrollbar class="amsm_im_ul_sl">
                        <ul>
                            <li v-for="(ssm,index) in sm.children" @click="go(ssm)">{{ssm.name}}</li>
                        </ul>
                    </el-scrollbar>
                </div>
            </div>

        </div>

        <div class="path">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
        </div>


        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Menu',
        data(){
            return {
                isopen:false,
                subMenu:[],
                menus:[
                    {id:0,name:'首页',active:0,icon:'el-icon-eleme'},
                    {id:1,name:'数据中心',active:0,icon:'el-icon-user',children:[
                        {id:11,name:'用户管理',active:0,children:[
                            {id:11,name:'会员管理',active:0},
                            {id:12,name:'商户管理',active:0},
                            {id:13,name:'大客户管理大客户管理',active:0},
                            {id:14,name:'虚拟用户',active:0},
                            {id:14,name:'用户等级用户等级',active:0},
                            {id:14,name:'用户评分',active:0},
                        ]},
                        {id:12,name:'用户管理',active:0,children:[
                            {id:11,name:'会员管理',active:0},
                            {id:12,name:'商户管理',active:0},
                            {id:13,name:'大客户管理大客户管理',active:0},
                            {id:14,name:'虚拟用户',active:0},
                            {id:14,name:'用户等级用户等级',active:0},
                            {id:14,name:'用户评分',active:0},
                        ]},
                        {id:13,name:'用户管理',active:0,children:[
                            {id:11,name:'会员管理',active:0},
                            {id:12,name:'商户管理',active:0},
                            {id:13,name:'大客户管理大客户管理',active:0},
                            {id:14,name:'虚拟用户',active:0},
                            {id:14,name:'用户等级用户等级',active:0},
                            {id:14,name:'用户评分',active:0},
                        ]},
                        {id:14,name:'用户管理',active:0,children:[
                            {id:11,name:'会员管理',active:0},
                            {id:12,name:'商户管理',active:0},
                            {id:13,name:'大客户管理大客户管理',active:0},
                            {id:14,name:'虚拟用户',active:0},
                            {id:14,name:'用户等级用户等级',active:0},
                            {id:14,name:'用户评分',active:0},
                            {id:14,name:'用户评分用户',active:0},
                        ]},
                    ]},
                    {id:2,name:'业务中心',active:0,icon:'el-icon-brush',children:[
                        {id:11,name:'用户管理2',active:0,children:[
                            {id:11,name:'会员管理',active:0},
                            {id:12,name:'商户管理',active:0},
                            {id:13,name:'大客户管理大客户管理',active:0},
                            {id:14,name:'虚拟用户',active:0},
                            {id:14,name:'用户等级用户等级',active:0},
                            {id:14,name:'用户评分',active:0},
                        ]},
                        {id:12,name:'用户管理2',active:0},
                        {id:13,name:'用户管理2',active:0},
                        {id:14,name:'用户管理2',active:0},
                    ]},
                    {id:3,name:'报表中心',active:0,icon:'el-icon-s-order',},
                    {id:4,name:'配置中心',active:0,icon:'el-icon-s-tools',},
                    {id:5,name:'系统管理',active:0,icon:'el-icon-orange',},
                ]
            }
        },
        methods:{
            open(m){
                this.menus.forEach(e => e.active=0);
                m.active=1;
                this.subMenu = m.children;
                this.isopen = this.subMenu&&this.subMenu.length>0;
                this.$nextTick(() => this.$refs.fx_down.focus());
            },
            close(){
                this.isopen=0;
            },
            gohome(){
                this.$router.push("/");
            },
            go(ssm){
                this.isopen=0;
                this.$router.push("/about");
            },
        },
    }
</script>



<style scoped>
    #menu {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .amenu {
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        background: #409EFF;
    }

    .amenu_site_logo {
        width: 180px;
        height: 70px;
        line-height: 70px;
        padding: 0 10px;
        font-weight: bold;
        cursor: pointer;
        font-size: 20px;
    }

    .amenu_site_menu {
        height: 70px;
        line-height: 70px;
        padding: 0 10px;
        cursor: pointer;
        text-align: left;
    }

    .amenu_site_menu:hover {
        background: #268df7;
        font-weight: bold;
    }

    .amsm_item_ul_li_active{
        background: #268df7;
        font-weight: bold;
    }

    .container {
        position: absolute;
        top: 104px;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgb(244, 244, 245);
        padding: 10px;
        overflow: auto;
    }

    .amenu_site_menu_down {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        border-bottom: 1px solid rgb(204, 209, 214);
        background: #f5f7f7;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .amenu_site_menu_down:focus{
        outline:none;
    }

    .amsm_item {
        text-align: left;
        padding: 10px 20px;
        width: 150px;
    }

    .amsm_item_title {
        padding: 0 10px 10px 10px;
        font-size: 14px;
        line-height: 30px;
        border-bottom: 1px solid #7eadde;
        color: #333;
    }

    .amsm_item ul {
        list-style-type: none;
        padding: 0;
        font-size: 12px;
        line-height: 25px;
        color: #62636d;
        padding: 0 10px;
        cursor: pointer;
    }

    .amsm_item ul li:hover{
        font-weight: bold;
        color: #409EFF;
    }



    .amsm_im_ul {
        height: 200px;
    }

    .amsm_im_ul_sl {
        height: 100%;
        z-index: 10;
    }

    .el-scrollbar>>>.el-scrollbar__wrap {
        overflow-x: hidden !important;
    }

    .loginInfo{
        position: fixed;
        right: 10px;
        top: 0;
        height: 70px;
        line-height: 70px;

    }

    .loginUser{
        width: 40px; 
        height: 40px;
        vertical-align: middle;
        border-radius: 10px;
    }

    .loginUserInfo{
        display: inline-block;
        color: #fff;
        vertical-align: middle;
        font-size: 14px;
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px solid #94bae1;
    }

    .loginUserInfo div{
        line-height:13px;
        padding:2px;
        text-align: right;
    }

    .loginUserInfo div i{
        margin-left: 3px;
        font-size: 16px;
        cursor: pointer;
    }

    .path{
        padding: 10px;
        color: #75848d;
        font-size: 15px;
        background: #dee7eb;
    }
</style>